<template>
  <van-nav-bar title="城市" left-arrow @click-left="onClickLeft" />

  <van-index-bar>
    <div v-for="item in cityList" :key="item.letter">
      <van-index-anchor :index="item.letter.toUpperCase()" />
      <van-cell
        v-for="val in item.data"
        :key="val"
        :title="val.name"
        @click="onGoHome(val.name)"
      />
    </div>
  </van-index-bar>
</template>

<script>
import { getCityListApi } from "@/api/home.js";
export default {
  name: "City",
  data() {
    return {
      cityList: [],
    };
  },
  created() {
    this.getCityList();
  },
  mounted() {},
  methods: {
    async getCityList() {
      let res = await getCityListApi();
      this.cityList = res.data;
    },
    onClickLeft() {
      this.$router.back(-1);
    },
    onGoHome(cityName) {
      localStorage.setItem("cityName", cityName);
      this.$router.push("/home");
    },
  },
};
</script>

<style></style>
